<script>
import {
  computed,
  defineComponent,
  inject,
  reactive,
  ref,
  toRaw,
  watch,
  watchEffect,
} from 'vue'
import * as Antd from 'ant-design-vue'
import { findIndex } from 'lodash'
import { List } from 'ant-design-vue'
import { glt, positiveFloatNumber } from '@Untils'
export default defineComponent({
  props: {
    list: {
      type: Object,
      required: true,
    },
    value: {
      type: Array,
      default: () => {
        return []
      },
    },
    type: {
      type: Number,
      default: () => {
        return 1
      },
    },
  },
  setup(props, context) {
    //1创建 2编辑
    let type = computed(() => {
      return props.type
    })
    //显示的所有的列表
    let list = reactive({ data: [...toRaw(props.list)] })
    let local_checked_list = reactive({ data: [] })

    //编辑时，把已选的ID 存入本地中
    local_checked_list.data = props.value.map((x) => {
      return x.rankNum
    })

    //console.log(JSON.stringify(props.value), list.data)
    //把外部传入的WEIGht加入list中
    //    console.log(list.data, props.value)
    props.value.map((x) => {
      let _index = findIndex(list.data, { value: x.rankNum })

      list.data[_index].weight = x.weight
      list.data[_index].addPrice = x.addPrice
    })

    let result = () => {
      let _result = local_checked_list.data.map((x) => {
        let _index = findIndex(list.data, { value: x })
        let _index2 = findIndex(props.value, { rankNum: x })
        if (_index2 < 0) {
          //外面没有传入。此时需要新加一条
          return { ...toRaw(list.data[_index]), rankNum: x }
        } else {
          return { ...toRaw(props.value[_index2]), ...toRaw(list.data[_index]) }
        }
      })

      return _result
    }
    //slider更新
    let updateHandlerBySlider = (item, e) => {
      let _index = findIndex(list.data, { value: item.value })
      list.data[_index].weight = e

      // console.log(result())
      form_ref.value.clearValidate()
      form_ref.value.validate().then(() => {
        context.emit('update:value', result())
      })
    }
    //checkbox更新
    let updateHandler = (e) => {
      local_checked_list.data = e

      form_ref.value.clearValidate()
      form_ref.value.validate().then(() => {
        context.emit('update:value', result())
      })
      // context.emit('update:value', result())
    }

    let updatePrice = (item, e) => {
      let _index = findIndex(list.data, { value: item.value })
      list.data[_index].addPrice = e

      form_ref.value.clearValidate()
      form_ref.value.validate().then(() => {
        context.emit('update:value', result())
      })
    }

    let form_ref = ref()

    let callFn = inject('validateCallBack')

    callFn(form_ref)
    return {
      list,
      context,
      type,
      local_checked_list,
      result,
      updateHandler,
      updateHandlerBySlider,
      updatePrice,
      form_ref,
    }
  },
  render() {
    return (
      <Antd.Form model={this.list.data} ref="form_ref">
        <Antd.CheckboxGroup
          value={this.local_checked_list.data}
          onChange={this.updateHandler}
          disabled={this.type == 2}
        >
          <Antd.Row gutter={[10, 10]} wrap={false}>
            {this.list.data.map((x, index) => {
              return (
                <Antd.Col flex={1}>
                  <Antd.Checkbox value={x.value} style={{ width: '100%' }}>
                    <div class="like-button">{x.label}</div>
                  </Antd.Checkbox>

                  <div style={{ width: '100%' }}>
                    {
                      <>
                        <Antd.Space direction="vertical">
                          <div
                            class="ant-statistic-title"
                            style={{
                              width: '100%',
                              'white-space': ' nowrap',
                              'text-overflow': 'ellipsis',
                              overflow: 'hidden',
                            }}
                          >
                            {x.label} 估重<b>{x.weight}</b>kg
                          </div>
                          {
                            <Antd.Slider
                              min={0.1}
                              disabled={
                                !this.local_checked_list.data.includes(x.value)
                              }
                              max={10}
                              step={0.1}
                              value={x.weight}
                              onChange={(e) => {
                                this.updateHandlerBySlider(x, e)
                              }}
                            />
                          }
                          {
                            <Antd.FormItem
                              name={[index, 'addPrice']}
                              rules={[
                                {
                                  required: true,
                                  message: '必填',
                                },
                                {
                                  validator: glt,
                                  value: 0,
                                  message: '必须大于0',
                                },
                                {
                                  validator: positiveFloatNumber,
                                  message: '请正确输入',
                                },
                              ]}
                            >
                              <Antd.Input
                                allowClear={true}
                                suffix="￥"
                                placeholder="商品加价"
                                disabled={
                                  !this.local_checked_list.data.includes(
                                    x.value
                                  )
                                }
                                value={x.addPrice}
                                onChange={(e) => {
                                  this.updatePrice(x, e.target.value)
                                }}
                              />
                            </Antd.FormItem>
                          }
                        </Antd.Space>
                      </>
                    }
                  </div>
                </Antd.Col>
              )
            })}
          </Antd.Row>
        </Antd.CheckboxGroup>
      </Antd.Form>
    )
  },
})
</script>

<style scoped>
:deep() .ant-checkbox-checked::after {
  display: none;
}
:deep() .ant-checkbox-inner {
  display: none;
}
:deep() .like-button {
  min-width: 100%;
  width: 100%;

  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #f0f0f0;
  transition: background 0.5s;
  margin-top: -20px;
}
:deep() .ant-checkbox-group {
  width: 100%;
}
:deep() .ant-checkbox-wrapper {
  width: 80px;
  height: 30px;
}

:deep() .ant-checkbox-wrapper-checked .like-button {
  border: 0;
  background-color: #198a19;
  color: #fff;
}
:deep()
  .ant-checkbox-wrapper-checked.ant-checkbox-wrapper-disabled
  .like-button {
  border: 1px solid #f0f0f0;
  background-color: rgba(25, 138, 25, 0.6);
  color: rgba(0, 0, 0, 0.25);
}
:deep() .ant-slider {
  margin-top: 0px;
  margin-bottom: 0px;
}
</style>
